<template>
  <div>
    <div class="weekBox">
      <h2>周末去哪儿</h2>
      <ul>
        <li v-for="item of weekList" :key="item.id">
          <div class="weekImg">
            <img :src="item.imgUrl"  alt />
          </div>
          <div class="weekInfo">
            <p class="title">{{item.title}}</p>
            <p class="desc"> {{item.desc}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "weekInfo",
  props:{
    weekList: Array
  }
};
</script>
 <style lang="stylus" scoped>
 .weekBox {
   background: #f5f5f5;
    li{
          position: relative;
    margin-bottom: .1rem;
    background: #fff;
    }
   h2 {
     height: 0.8rem;
     padding-left: 0.26rem;
     line-height: 0.8rem;
     color: #212121;
   }

   .weekInfo {
     position: relative;
     padding: 0.14rem 0.2rem 0.2rem 0.2rem;

     .title {
       overflow: hidden;
       padding-right: 1.4rem;
       color: #212121;
       font-size: 0.28rem;
       line-height: 0.48rem;
       white-space: nowrap;
       text-overflow: ellipsis;
     }

     .desc {
       overflow: hidden;
       padding-right: 1.4rem;
       color: #616161;
       font-size: 0.24rem;
       line-height: 0.42rem;
       white-space: nowrap;
       text-overflow: ellipsis;
     }
   }
 }
</style>